<template>
	<view class="content">
		<view class="banner">
			<u-swiper bg-color="#fff" :autoplay="false" :list="bannerList" height="600"></u-swiper>
		</view>
		<view class="name"><text></text><text>{{pageDetails.integral}}</text></view>
		<view class="describe">{{pageDetails.brand}}{{pageDetails.descrip}}</view>
		<view class="specification">
			<view class="specification-wrap" @click="handleSpecificationClick">
				<view class="specification-left">
					<text>已选择</text>
					<text>{{specification1[specificationCurrent1].content}}</text>
					<text>x{{numValue1}}</text>
				</view>
				<view class="specification-icon">
					<u-icon name="more-dot-fill" color="#666" size="40"></u-icon>
				</view>
			</view>
		</view>
		<view class="detail-img-wrap">
			<image class="detail-image" mode="widthFix" :src="item" v-for="(item,index) in detailImgList" :key="index">
			</image>
		</view>
		<view class="btn">
			<view class="btn-wrap">
				<custom-button text="点击兑换" @click="handleJumpExchange"></custom-button>
			</view>
			<view class="bottom-safe-area"></view>
		</view>
		<view class="bottom-safe-area"></view>
		<!--popup-->
		<u-mask :show="maskShow" @click="handleMaskClick" duration="400" z-index="30"></u-mask>
		<uni-transition ref="ani" :styles="styles" :show="popupShow">
			<view class="specification-top">
				<image class="specification-img" mode="widthFix" :src="specification1[specificationCurrent1].img"></image>
				<view class="specification-name"><text></text><text>{{pageDetails.integral}}</text></view>
				<view class="specification-stock">(库存:{{specification1[specificationCurrent1].stock}})</view>
				<view class="specification-current">已选择：{{specification1[specificationCurrent1].content}}</view>
			</view>
			<view class="specification-main-wrap">
				<view class="specification-main">
					<view class="specification-01">
						<view class="specification-01-title">商品规格</view>
						<view class="specification-01-list">
							<view @click="handleSpecification1Click(index)"
								:class="{'specification-01-item':true,'select':specificationCurrent1==index}"
								v-for="(item,index) in specification1" :key="index">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="specification-num">
				<view class="specification-num-title">购买数量</view>
				<view class="specification-num-box">
					<u-number-box positive-integer :min="1" :max="specification1[specificationCurrent1].stock" v-model="numValue1"></u-number-box>
				</view>
			</view>
			<view class="specification-btn">
				<uv-btn shape="circle" @click="handleSureClick" text="确定"></uv-btn>
			</view>
			<view class="bottom-safe-area"></view>
		</uni-transition>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: null,
				pageDetails:{},
				specificationImg: 'http://api.cd1a.cn/imges/integral_mall/5d6a5d39ca7c5-1567251769.png',
				detailImgList: [],
				//banner
				bannerList: [],
				//popup
				popupShow: true,
				maskShow: false,
				styles: {
					'width': '100%',
					'background': '#fff',
					'position': 'fixed',
					"left": '0',
					'bottom': '-100%',
					"zIndex": 100,
					// "transform": "translateY(0)"
					// "transform": "translateY(330px)"
				},
				//specification 1
				specification1: [],
				specificationCurrent1: 0, //Index of the first specification
				numValue1: 1,
			}
		},
		onReady() {
			this.$refs.ani.init({
				duration: 400,
				timingFunction: 'ease-out',
				transformOrigin: '50% 50%',
			})
		},
		onLoad(options) {
			this.id = options.id;
			this.getIntegralDetailByIdRequest();
		},
		methods: {
			getIntegralDetailByIdRequest(){
				this.$u.api.getIntegralDetailById({
					
					goods_id:this.id,
				}).then(res=>{
					//顶部banner数据
					let bannerList=[];
					res.carousel.forEach(item=>{
						let obj={
							image:item
						};
						bannerList.push(obj);
					});
					this.bannerList=bannerList;
					//页面非弹窗内容数据
					this.pageDetails=res.goods_detail;
					this.detailImgList=res.details_carousel;
					//规格
					let specification1=[];
					res.sku.forEach(item=>{
						let obj={
							content:item.color+''+item.size+''+item.other_attr,//当前规格内容
							img:item.img,//当前规格图片
							stock:item.stock,//当前规格库存
							sku_id:item.sku_id,
						};
						specification1.push(obj);
					});
					this.specification1=specification1;
				}).catch(()=>{});
			},
			//specification popup
			//popup animation
			handleSpecificationClick() {
				this.maskShow = true;
				this.$refs.ani.step({
					bottom: '0',
				});
				this.$refs.ani.run();
			},
			handleMaskClick() {
				this._closeSpecificationPopup();
			},
			_closeSpecificationPopup(){
				this.maskShow = false;
				this.$refs.ani.step({
					bottom: '-100%',
				});
				this.$refs.ani.run();
			},
			//popup sure
			handleSureClick(){
				this._closeSpecificationPopup();
			},
			//1.The first specification
			handleSpecification1Click(index) {
				this.specificationCurrent1 = index;
				this.numValue1=1;//重置选择的数量
			},
			//exchange click
			handleJumpExchange(){
				let i=this.specificationCurrent1;
				let data={
					...this.specification1[i],
					id:this.id,//商品id
					num:this.numValue1,
					totalPrice:this.pageDetails.integral*this.numValue1,//商品总价
					describe:this.pageDetails.brand+' '+this.pageDetails.descrip,//商品标题
				};
				//存储当前用户选择的商品规格等数据;
				uni.setStorage({
				    key: 'currentIntegralGoods',
				    data,
				    success: function () {
				        uni.navigateTo({
				        	url: '/pages/integral/exchange'
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 120rpx;
	}

	.name {
		padding: 24rpx 24rpx;
		padding-top: 24rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #FF0303;
	}

	.name text:nth-child(1) {
		font-size: 30rpx;
	}

	.describe {
		padding: 0 24rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		padding-bottom: 24rpx;
		border-bottom: 20rpx solid #f4f4f4;
	}

	.describe {
		padding: 0 24rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		padding-bottom: 24rpx;
		border-bottom: 20rpx solid #f4f4f4;
	}

	.specification {
		position: relative;
		padding: 0 24rpx;
	}

	.specification-wrap {
		border-bottom: 2rpx solid #e5e5e5;
		padding: 30rpx 0;
	}

	.specification-icon {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.specification-left text:nth-child(1) {
		font-size: 28rpx;
		color: #333;
		padding-right: 20rpx;
		vertical-align: middle;
	}

	.specification-left text:nth-child(2) {
		font-size: 28rpx;
		color: #666;
		display: inline-block;
		max-width:400rpx;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		vertical-align: middle;
		
	}
	.specification-left text:nth-child(3) {
		font-size: 28rpx;
		color: #333;
		vertical-align: middle;
		padding-left: 30rpx;
	}
	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 20;
	}

	.detail-img-wrap {
		padding: 24rpx;
	}

	.detail-image {
		width: 100%;
		display: block;
		height: 780rpx
	}

	.specification-top {
		padding-left: 280rpx;
		padding-top: 50rpx;
		position: relative;
		padding-bottom: 10rpx;

	}

	.specification-img {
		position: absolute;
		left: 24rpx;
		top: -20px;
		width: 230rpx;
		height: 230rpx;
		display: block;
		border-radius: 14rpx;
		border: 2rpx solid #dedede;
	}

	.specification-name text:nth-child(1) {
		font-size: 32rpx;
		color: #FF0303;
	}

	.specification-name text:nth-child(2) {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF0303;
	}

	.specification-stock {
		font-size: 24rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.specification-current {
		font-size: 24rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.specification-main-wrap {
		padding: 30rpx 24rpx;
		padding-bottom: 0;
	}

	.specification-main {
		border-bottom: 2rpx solid #efefef;
		border-top: 2rpx solid #efefef;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.specification-01-title {
		font-size: 30rpx;
		color: #333333;
		padding-bottom: 30rpx;
	}

	.specification-01-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.specification-01-item {
		padding: 12rpx 16rpx;
		border-radius: 21rpx;
		line-height: 1;
		font-size: 28rpx;
		margin-right: 10rpx;
		color: #666666;
		border: 2rpx solid #0DA297;

	}

	.specification-01-item.select {
		background-color: #0DA297;
		color: #fff;
	}

	.specification-num {
		position: relative;
		padding: 30rpx 24rpx;
	}

	.specification-num-box {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.specification-btn {
		padding: 40rpx 24rpx 0 24rpx;
		padding-top: 60rpx;
	}
</style>
